<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/estilos.css"/>
        <script src="aoj/aojcanvas.js"></script>
        <script src="aoj/aojgame.js"></script>
        <script>
            var _lastMilisecond = 0;
            var _updatesCount = 0;
            var _updatesInLastSecond = 0;
            var _lastUpdateMilisecond = 0;
            var _frameCount = 0;
            var carro = {
                x: 0,
                y: 0,
                dx: 30,
                dy: 30,
                lastX: 0,
                lastY: 0,
                sprite: aojNewImage('img/simple-travel-car.png')
            }

            function pulse() {
                var d = new Date();
                if (d.getTime() - _lastMilisecond > 50) {
                    _lastMilisecond = d.getTime();
                    update();
                    _frameCount = 0;
                }
                _frameCount ++;
                render(_frameCount / (_aojPulsesInLastSecond / _updatesInLastSecond));
            }

            function update() {
                _updatesCount ++;
                var d = new Date();
                if (d.getTime() - _lastUpdateMilisecond > 1000) {
                    _lastUpdateMilisecond = d.getTime();
                    _updatesInLastSecond = _updatesCount;
                    _updatesCount = 0;
                }
                carro.lastX = carro.x;
                carro.lastY = carro.y;

                carro.x += carro.dx;
                carro.y += carro.dy;
                if (carro.x < 0 || carro.x > aojCanvas().width) {
                    carro.dx *= -1;
                }
                if (carro.y < 0 || carro.y > aojCanvas().height) {
                    carro.dy *= -1;
                }
            }

            function render(delta) {
                aojFillRect(0, 0, aojCanvas().width, aojCanvas().height, 'gray');
                var x = carro.lastX + ((carro.x - carro.lastX) * delta);
                var y = carro.lastY + ((carro.y - carro.lastY) * delta);
                aojDrawImage(carro.sprite, x, y);
                aojFillRect(57,5,50,20, 'blue');
                aojSetFont('');
                aojDrawText(_updatesInLastSecond + ' tps', 65, 20, 'yellow');
            }

            window.onload = function carregaImagem() {
                carro.sprite = aojNewImage('img/simple-travel-car.png', imagemCarregada);
            }

            function imagemCarregada() {
                aojSetPulseCallback(pulse);
                aojSetCanvas('canvas1');
                aojStartGameLoop();
            }
        </script>
    </head>
    <body>
        <div id="info">Exemplo 1 - novo game loop.</div>
        <canvas id="canvas1" width="960" height="600"></canvas>
    </body>
</html>
